<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18.control_component</title>
</head>
<body>
<div id="app"></div>

<script src="lib/react.development.js"></script>
<script src="lib/react-dom.development.js"></script>
<script src="lib/babel.min.js"></script>

<script type="text/babel">
    /*受控组件
       文本框通过onchange事件将值实时的传给state，所以可以直接通过函数将文本框的值传递
       而不用refs

       文本框每一次传值过来都会修改state，进而触发render 让页面进行不断的渲染
    *
    * */
  class Form extends React.Component{
   state ={
       username:'',
       password:''
   }

      changeUsername =(event)=>{
         this.setState({username:event.target.value})
      }

      changePassword =(event)=>{
         this.setState({password:event.target.value})
      }

      submit = ()=>{
          console.log(this.state.password,"---",this.state.username)
      }

      render() {
          console.log("页面渲染")
          return (
              <div>
                  <form onSubmit={this.submit}>
                      <input type="text" onChange={this.changeUsername}/>
                      <input type="password" onChange={this.changePassword}/>
                      <button>登录</button>
                  </form>
              </div>
          );



      }
  }

   ReactDOM.render(<Form/>,document.getElementById("app"))
</script>
</body>
</html>